<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>组件</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <list :arr="list1"></list>
        <list :arr="list2"></list>
    </div>

</body>
<template id="mylist">
    <div>
        <ul>
            <li v-for="item in arr">{{item}}</li>
        </ul>
    </div>
</template>

<script>
    Vue.component("list", {
        props: ["arr"],
        template: `#mylist`
    })


    new Vue({
        el: "#app",
        data: {
            list1: [1, 2, 3, 4],
            list2: ["a", "b", "c", "d"]
        }
    })


</script>

</html>